<template>
    <div class="container flex-col">
        <div class="flex-row-center space-between">
            <span class="page_title">问卷详情: {{ data.examDetail.title }}</span>
        </div>
        <div class="comm_border flex-row flex_1 " style="margin-top: 16px; ">
            <div class="flex-col " style="width: 600px;">
                <div class="flex-row-center space-between" style="margin: 8px 24px 0 24px;">
                    <div class="flex-row-center">
                        <span class="search_title">科室</span>
                        <el-select v-model="data.selectOfficeCode" size="large" style="margin-left: 16px; width: 200px;"
                                   placeholder="请选择科室">
                            <el-option v-for="(qtType, index) in data.listOffice"
                                       :key="index"
                                       :label="qtType.officeName"
                                       :value="qtType.officeCode"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" class="search_btn_primary" @click="click_search">搜索</el-button>
                </div>
                <div class="flex_1" style="margin: 16px 16px auto">
                    <el-table :data="data.listExamUserInfo" border :row-class-name="tableRowClassName">
                        <el-table-column prop="index" label="序号" width="60" />
                        <el-table-column prop="officeName" label="科室名称" />
                        <el-table-column prop="userName" label="姓名" width="80" />
                        <el-table-column prop="score" label="分值" width="60" />
                        <el-table-column prop="createTimeStr" label="创建时间" width="180" />
                        <el-table-column label="操作" width="60px">
                            <template #default="scope">
                                <el-button link size="small" @click="click_preview(scope.$index, scope.row)">
                                    查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex-row-reverse-center" style="height: 50px;">
                    <el-pagination v-model:current-page="pager.currentPage"
                                   v-model:page-size="pager.pageSize"
                                   :page-sizes="[10,20,50,100]"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="pager.total"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
            <div class="comm_split_v"></div>
            <div class="flex_1 flex-col" style="margin:24px; overflow-y: auto;height: calc(100vh - 200px);">
                <div :key="item" v-for="(item,i) in data.examDetail.listExamUserAnswerVo">
                    <div class="flex-col">
                        <span class="qtTitle">{{ item.index }}: {{ item.title }} ({{ item.qtTypeStr }} {{ item.score }}分)</span>
                        <div class="flex-col" style="margin-top: 8px;" v-for="item_item in item.listItemInfo">
                            <div class="flex-row-center">
                                <el-checkbox :model-value="item_item.isAnswer" class="option">
                                    {{ item_item.content }}
                                    ({{ item_item.score }}分)
                                </el-checkbox>
                            </div>
                        </div>
                    </div>
                    <div v-if="i!=data.examDetail.listExamUserAnswerVo.length-1" class="comm_split_h"
                         style="margin-top: 8px; margin-bottom: 8px;"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

    import { onMounted, reactive, shallowRef } from "vue";
    import { QtBankVO } from "@/type/vo/QtBankVO";
    import { ElMessage } from "element-plus";
    import { addDialog } from "@/components/gDialog/index";
    import QtCreate from "@/views/Naire/dialogs/NaireQtCreate.vue";
    import { tickAsTimeString } from "@/utils/TimeUtil";
    import { useRoute } from "vue-router";
    import { api_pageExamUserDetailInfo, api_pageExamUserInfo } from "@/request/apis/publicApi";
    import { ExamUserInfoVO } from "@/type/vo/ExamUserInfoVO";
    import { OfficeInfoVO } from "@/type/vo/OfficeInfoVO";
    import { api_getOfficeList } from "@/request/apis/hospitalApi";
    import { ExamVO } from "@/type/vo/ExamVO";
    import msg from '@/components/msg'
    import { QtTypeAsString } from "@/utils/EnumHelper";
    import { ExamRecordUserAnswerVo } from "@/type/vo/ExamRecordUserAnswerVo";

    const route = useRoute();
    const examId = route.query.examId as string;

    const data = reactive({
        officeCode: '',
        listQtBank: Array<QtBankVO>(),
        listExamUserInfo: Array<ExamUserInfoVO>(),
        listOffice: Array<OfficeInfoVO>(),
        examDetail: {} as ExamRecordUserAnswerVo,
        selectOfficeCode: ''
    })
    const pager = reactive({
        currentPage: 1,
        pageSize: 10,
        total: 10,
    })

    const click_search = () => {
        pager.currentPage = 1;
        search_pri();
    }

    const click_preview = async (index: number, row: ExamUserInfoVO) => {
        //这里查询
        const r = await api_pageExamUserDetailInfo(row.examId, row.userId);
        if (!r) {
            await msg.info('数据异常', '提示', {
                confirmButtonText: '确定'
            });
            return;
        }
        if (r.code != 0) {
            await msg.info(`数据异常!  ${r.code} msg：${r.msg}`, '提示', {
                confirmButtonText: '确定'
            });
            return;
        }
        data.examDetail = r.data;
        for (let i = 0; i < data.examDetail.listExamUserAnswerVo.length; i++) {
            data.examDetail.listExamUserAnswerVo[i].index = i + 1;
            const qt = data.examDetail.listExamUserAnswerVo[i];
            qt.qtTypeStr = QtTypeAsString(qt.qtType);
            const listItemInfo = qt.listItemInfo;
            const listUserAnswer = qt.listUserAnswer;
            for (let j = 0; j < listItemInfo.length; j++) {
                for (let k = 0; k < listUserAnswer.length; k++) {
                    if (listItemInfo[j].qbItemId == listUserAnswer[k].answerId) {
                        listItemInfo[j].isAnswer = true;
                    }
                }
            }

        }
    }


    onMounted(async () => {
        await getOfficeList();
        await search_pri();
    })

    const getOfficeList = async () => {
        const r = await api_getOfficeList();
        if (!r) {
            await msg.info('数据异常', '提示', {
                confirmButtonText: '确定'
            });
            return;
        }
        if (r.code != 0) {
            await msg.info(`数据异常!  ${r.code} msg：${r.msg}`, '提示', {
                confirmButtonText: '确定'
            });
            return;
        }
        data.listOffice = r.data;
        data.listOffice.unshift({
            officeCode: '',
            officeName: '全部'
        });
    }

    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
        search_pri();
    }

    const search_pri = async () => {
        data.listQtBank.length = 0;
        const page = pager.currentPage;
        const limit = pager.pageSize;

        const r = await api_pageExamUserInfo(examId, data.officeCode, page, limit);
        if (!r) {
            await msg.error('数据异常!');
            return;
        }
        if (r.code != 0) {
            await msg.error(`错误! ${r.code}${r.msg}`);
            return;
        }
        if (r.data && r.data.records) {
            for (let i = 0; i < r.data.records.length; i++) {
                r.data.records[i].index = i + 1;
                r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
            }
        }
        data.listExamUserInfo = r.data.records;
        pager.total = r.data.total;
    }

    const handleCurrentChange = (val: number) => {
        search_pri();
    }

    interface User {
        date: string
        name: string
        address: string
    }

    const tableRowClassName = ({
        row,
        rowIndex,
    }: {
        row: User
        rowIndex: number
    }) => {
        if (rowIndex === 1) {
            return 'warning-row'
        } else if (rowIndex === 3) {
            return 'success-row'
        }
        return ''
    }


    async function btn_click_create_qt() {
        try {
            addDialog({
                title: "创建题目",
                component: shallowRef(QtCreate),
                width: "600px",
                props: {},
                callBack: async (goEdit: Boolean) => {
                    if (goEdit) {
                        ElMessage.success('创建成功!');
                        await search_pri();
                    } else {
                        // tableList.data[index as number] = data
                    }
                    console.log(data, "data")
                }
            })
            // 处理确认操作
        } catch (error) {
            // 处理取消操作
        }
    }
</script>

<style scoped>
    .btn_top {
        border: none;
        height: 48px;
        padding: 13px 28px;
        background-color: white;
        border-radius: 12px;
        color: #3F8CFF;
        font-size: 16px;
        font-weight: 400;
    }


    .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }

    .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
</style>